
<div id="app">
    <admin-page-header :back="back">
    </admin-page-header>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <bi-card title="搜索" style="margin-bottom:var(--box-margin-bottom);">
                    <div class="row g-2">

                    <div class="col-12 col-sm-12 col-lg-3">
                        <bi-select v-model="search.app"  placeholder="请选择应用" >
                            <bi-select-option v-for="item in $pageData.appOption" :key="item.value"  :value="item.value" :label="item.label"></bi-select-option>
                        </bi-select>
                    </div>
                    <div class="col-12 col-sm-12 col-lg-3">
                        <bi-select v-model="search.time"  placeholder="请选择时间" >
                            <bi-select-option value="today" label="今天"></bi-select-option>
                            <bi-select-option value="yesterday" label="昨天"></bi-select-option>
                            <bi-select-option value="week" label="本周"></bi-select-option>
                            <bi-select-option value="month" label="本月"></bi-select-option>
                        </bi-select>
                    </div>
                    <div class="col-12 col-sm-12 col-lg-6">
                        <bi-input v-model="search.keyword"  placeholder="请输入标题/IP/内容等" icon="fa fa-search" ></bi-input>
                    </div>
                    </div>
                </bi-card>

                <bi-card title="日志列表">
                    <bi-table checkbox :data="list" :loading="loading">
                        <bi-table-column label="ID" name="log_id" width="100"></bi-table-column>
                        <bi-table-column label="APP" name="app" width="100"></bi-table-column>
                        <bi-table-column label="时间" name="datetime" width="200"></bi-table-column>
                        <bi-table-column label="标题" name="title" ></bi-table-column>
                        <bi-table-column label="IP" name="ip" width="100"></bi-table-column>
                        <bi-table-column label="管理"  width="100" v-slot="{row}">
                            <bi-button type="light" @click="show(row)" >详情</bi-button>
                        </bi-table-column>
                    </bi-table>

                    <template #footer>
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>
            </div>
        </div>
    </div>
</div>


<script>
import logDetailDialog from 'user/log-detail-dialog.vue';
import {debounce} from '@@/admin/assets/js/global.js';
let app = admin.createApp({
    data(){

        let back  = true;

        if (this.$pageData.my == true) back  = false;


        let search = {
            app:'',
            time:'',
            keyword:'',
        }

        return {
            search,
            list:[],
            loading:false,
            page:1,
            count:0,
            total:0,
            back
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.page = 1;
                this.getList();
            },1000),
            deep:true
        },
        page(val){
            this.getList();
        } 
    },
    methods:{
        getList(){
            this.loading = true;
            this.$ajax({
                url:this.$url({action:'logList'}),
                data:{
                    page_current:this.page,
                    user_id:this.$pageData.user_id,
                    ...this.search
                },
                success:(res)=>{
                    this.list = res.list;
                    this.count  = res.count;
                    this.total  = res.total;
                },
                over:()=>{
                    this.loading = false;
                }
            });
        },
        show(row){
            this.$dialog({
                type:'vue',
                content:admin.createApp(logDetailDialog,{item:row}),
            });
        }
    },
    mounted(){
        this.getList();
    }
}).mount('#app');

</script>